<template>
	<view class="userAddress">
		<navbar :showBack="true">地址管理</navbar>
		<view class="address">
			<view class="line" v-if="showAddress"><image src="../../../static/images/line.jpg" mode=""></image></view>
			<view class="noCommodity" v-if="!showAddress">
				<view class="pic"><image src="../../../static/images/noAddress.png" mode=""></image></view>
			</view>
			<radio-group class="radio-group" name="" v-if="showAddress">
				<view class="item" v-for="(item,index) in listData" :key="index">
					<view class="itemText">
						<view class="consignee">
							收货人：{{item.real_name}}
							<text class="phone">{{item.phone}}</text>
						</view>
						<view>收货地址：{{item.province}}{{item.city}}{{item.district}}{{item.detail}}</view>
					</view>
					<view class="operation acea-row row-between-wrapper">
						<label class="radio acea-row row-middle" @click="setDefault(item.id)">
							<radio value="" :checked="item.is_default==1?true:false" /><text>设为默认</text>
						</label>
						<view class="acea-row row-middle">
							<navigator :url="'/pages/pack/user_address/user_address?id='+item.id">
								<text class="iconfont icon-bianji"></text>
								编辑
							</navigator>
							<view @click="delAddress(item.id)">
								<text class="iconfonts iconfont icon-shanchu"></text>
								删除
							</view>
						</view>
					</view>
				</view>
			</radio-group>
		</view>
		<view class="footer acea-row row-between-wrapper">
			<navigator url="/pages/pack/user_address/user_address" class="addressBnt bg-color">
				<text class="iconfont icon-tianjiadizhi"></text>
				添加新地址
			</navigator>
			<view class="addressBnt wxbnt" @click="getWxAddress">
				<text class="iconfont icon-weixin2"></text>
				导入微信地址
			</view>
		</view>
		<!-- 进度条开始 -->
		<line-progress></line-progress>
		<!-- 进度条结束 -->
	</view>
</template>

<script>
	import api from "@/api/api.js";
	export default{
		data(){
			return{
				showAddress:false,
				listData:[]
			}
		},
		onShow() {
			this.getData()
		},
		methods:{
			getData:function(){
				const that = this;
				api.user.getAddressList().then(e=>{
					console.log(e)
					if(e.status == 200){
						that.showAddress = true;
						that.listData = e.data;
					}else{
						uni.showToast({
							icon:"loading",
							title:e.msg,
							duration:1000
						})
					}
				})
			},
			setDefault:function(id){
				const that = this;
				let data = this.listData.find(e=>e.id == id)
				data.address = {};
				data.address.province = data.province;
				data.address.city = data.city;
				data.address.district = data.district
				data.address.city_id = 0
				data.is_default = 1;
				api.user.editAddress(data).then(e=>{
					if(e.status == 200){
						uni.showToast({
							icon:"success",
							title:"设置成功",
							duration:800
						})
						that.getData()
					}else{
						uni.showToast({
							icon:"loading",
							title:e.msg,
							duration:1000
						})
					}
				})
			},
			getWxAddress:function(){
				uni.chooseAddress({
					success(e) {
						console.log(e)
						let data = {};
						data.address = {};
						data.address.province = e.provinceName;
						data.address.city = e.cityName;
						data.address.district = e.countyName;
						data.address.city_id = 0;
						data.is_default = 0;
						data.real_name = e.userName;
						data.detail = e.detailInfo;
						data.phone = e.telNumber;
						data.post_code = e.postalCode;
						console.log(data)
						api.user.editAddress(data).then(re=>{
							console.log("re",re)
							if(re.status == 200){
								uni.showToast({
									icon:"success",
									title:"设置成功",
									duration:800
								})
							}else{
								uni.showToast({
									icon:"loading",
									title:re.msg,
									duration:1000
								})
							}
						})
					}
				})
			},
			delAddress:function(id){
				console.log(id)
				api.user.delAddress(id).then(e=>{
					console.log(e)
					if(e.status == 200){
						uni.showToast({
							icon:"success",
							title:"删除成功",
							duration:800
						})
						this.getData()
					}else{
						uni.showToast({
							icon:"success",
							title:"删除失败",
							duration:1000
						})
					}
				})
			}
		}
	}
</script>

<style>
	.userAddress .address .line{
		width: 100%;
		height: 3rpx;
	}
	.userAddress .address .line image{
		display: block;
	}
	.userAddress .address .item{
		background-color: #fff;
		padding: 0 30rpx;
		margin-bottom: 12rpx;
	}
	.userAddress .address .item .itemText{
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
		color: #282828;
	}
	.userAddress .address .item .itemText .consignee{
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 8rpx;
	}
	.userAddress .address .item .itemText .consignee .phone{
		margin-left: 25rpx;
	}
	.userAddress .address .item .operation{
		height: 83rpx;
		font-size: 28rpx;
		color: #282828;
	}
	.userAddress .address .item .operation .radio text{
		margin-left: 13rpx;
	}
	.userAddress .address .item .operation .acea-row .iconfont{
		color: #2c2c2c;
		font-size: 35rpx;
		vertical-align: -2rpx;
		margin-right: 10rpx;
	}
	.userAddress .address .item .operation .acea-row .iconfonts{
		margin-left: 40rpx;
		font-size: 38rpx;
	}
	.userAddress .footer{
		position: fixed;
		width: 100%;
		background-color: #fff;
		bottom: 0;
		height: 106rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.userAddress .footer .addressBnt{
		width: 330rpx;
		height: 76rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 76rpx;
		font-size: 30rpx;
		color: #fff;
	}
	.userAddress .footer .addressBnt.wxbnt{
		background-color: #fe960f;
	}
	.userAddress .footer .addressBnt .iconfont{
		margin-right: 8rpx;
	}
	.userAddress .address .noCommodity{
		border-top: 7rpx solid #f5f5f5;
	}
	.userAddress .address .noCommodity .pic{
		width: 414rpx;
		height: 336rpx;
		margin: 30rpx auto 30rpx auto;
	}
</style>
